class NoticeModal {
    constructor() {
        this.modal = document.getElementById('noticeModal');
        this.noticeList = document.getElementById('noticeList');
        this.noticeContent = document.getElementById('noticeContent');
        this.init();
    }

    async init() {
        this.bindEvents();
    }

    async show() {
        MaskLayer.show();
        this.modal.classList.add('notice-modal--active');
        await this.loadNotices();
    }

    hide() {
        this.modal.classList.remove('notice-modal--active');
        MaskLayer.hide();
    }

    bindEvents() {
        // 关闭按钮
        this.modal.querySelector('.notice-modal__close-btn').addEventListener('click', () => this.hide());

        // 遮罩层关闭
        document.getElementById('globalMaskLayer').addEventListener('click', () => this.hide());
    }

    async loadNotices() {
        try {
            // 显示加载状态
            this.noticeList.innerHTML = `
        <div class="notice-modal__loading">
          <div class="loading-spinner"></div>
        </div>
      `;

            // 调用API获取公告数据
            const notices = await fetchData(API.NOTICE.LIST);

            // 渲染公告列表
            this.renderNoticeList(notices);

            // 默认显示第一条公告
            if (notices.length > 0) {
                this.renderNoticeContent(notices[0]);
                // 设置第一个公告为选中状态
                document.querySelector('.notice-modal__list-item').classList.add('notice-modal__list-item--active');
            }
        } catch (error) {
            Alert.show(`加载公告失败: ${error.message}`, 'error');
            this.hide();
        }
    }

    renderNoticeList(notices) {
        this.noticeList.innerHTML = '';

        if (notices.length === 0) {
            this.noticeList.innerHTML = `
        <div class="notice-modal__placeholder">
          <i class="icon-notice"></i>
          <p>暂无公告</p>
        </div>
      `;
            return;
        }

        notices.forEach(notice => {
            const noticeItem = document.createElement('div');
            noticeItem.className = 'notice-modal__list-item';
            noticeItem.innerHTML = `
        <div class="notice-modal__list-title">${notice.noticeTitle}</div>
        <span class="notice-modal__list-type ${notice.noticeType === '1' ? '' : 'notice-modal__list-type--notice'}">
          ${notice.noticeType === '1' ? '通知' : '公告'}
        </span>
      `;

            noticeItem.addEventListener('click', () => {
                // 移除所有选中状态
                document.querySelectorAll('.notice-modal__list-item').forEach(item => {
                    item.classList.remove('notice-modal__list-item--active');
                });
                // 添加当前选中状态
                noticeItem.classList.add('notice-modal__list-item--active');
                // 显示公告详情
                this.renderNoticeContent(notice);
            });

            this.noticeList.appendChild(noticeItem);
        });
    }

    renderNoticeContent(notice) {
        this.noticeContent.innerHTML = `
      <h3 class="notice-modal__detail-title">${notice.noticeTitle}</h3>
      <div class="notice-modal__detail-content">${notice.noticeContent}</div>
    `;
    }
}

// 初始化公告模块
document.addEventListener('DOMContentLoaded', () => {
    window.noticeModal = new NoticeModal();

    // 绑定公告导航点击事件
    document.getElementById('nav-notice').addEventListener('click', async (e) => {
        e.preventDefault();
        noticeModal.show();
    });

});